<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>多媒体文件预览</title>
</head>
<style>
    html,body{background-color: #262626;height:100%;overflow:hidden;}
    .m{ margin: 0 auto; text-align: center; }
</style>
<body>
<div class="m">
    <div id="video" style="display: contents;"></div>
</div>
<script th:inline="javascript">ctx = [[${ctx}]];</script>
<script th:src="${ctx}+'lib/jquery/jquery.min.js'"></script>
<script th:src="${ctx}+'lib/xgplayer/xgplayer.js'"></script>
<script th:inline="javascript">name = [[${name}]];value = [[${value}]];</script>
<script>
    var player;
    var url;
    var height;
    var width;

    $(function () {
        var param = '';
        if (name == 'file') {
            param = '/' + value;
        } else {
            param += '?' + name + '=' + value;
        }
        url = encodeURI(encodeURI(ctx + 'public/file/preview' + param));
        height = (screen.availHeight/3)*2;
        width = (screen.availWidth/3)*2;

        initPlayer();
    });

    function initPlayer() {
        player = new Player({
            id: 'video',
            url: url,
            fluid: false, //流式布局
            width: '100%',
            height: height,
            fitVideoSize: 'fixHeight', //自适应视频内容宽高
            autoplay: true, //自动播放
            loop: false, //循环播放
            videoInit: true, //初始化显示视频首帧
            playbackRate: [0.5, 1, 1.5, 2, 4], //倍速播放
            defaultPlaybackRate: 1, //默认播放速度
            pip: false, //画中画
            download: true, //下载按钮
            screenShot: true, //截图
            controls: true //显示控制条
        });
    }
</script>
</body>
</html>
